<template>
	<view class="login">
		<view class="content-wrapper">
			<view class="title">
				<image src="../../static/image/vote_log.png"></image>
				<h1>欢迎使用微投票</h1>
			</view>
			<view class="login-form">
				<view class="login-form-items">
					<view class="login-form-items-title">用户名</view>
					<input type="text" class="login-input" placeholder="用户名可输入字母、数字、下划线，长度 4-20 位，且不能以数字或下划线开头" v-model="form.userName"  />
				</view>
				<view class="login-form-items">
					<view class="login-form-items-title">昵称</view>
					<input type="text" class="login-input" placeholder="昵称可输入中文，字母、数字、下划线，长度2-16位" v-model="form.nickName"  />
				</view>
				<view class="login-form-items">
					<view class="login-form-items-title">登录密码</view>
					<input v-model="form.password" :type="pwd_show?'text':'password'" class="login-input" maxlength="20"
						placeholder="数字或字母且不少于6位" />
					<image class="password_img" @click="change_pwd(1)" style="width: 25px; height: 15px;"
						:src="pwd_show? '/static/image/eye_open.png':'/static/image/eye_close.png'"></image>
				</view>
				<view class="login-form-items">
					<view class="login-form-items-title">确认密码</view>
					<input v-model="form.confirmPassword" :type="pwd_cshow?'text':'password'" maxlength="20"
						class="login-input" placeholder="输入确认密码" />
					<image class="password_img" @click="change_pwd(2)" style="width: 25px; height: 15px;"
						:src="pwd_cshow? '/static/image/eye_open.png':'/static/image/eye_close.png'"></image>
				</view>
			</view>
		</view>
		<div class="submit-wrapper">
			<button style="background-color: #1296db;" type="primary" class="login-btn"
				@click="registerHandler">注册</button>
		</div>
		<view class="footer">
			已有账号？<view @click="goTo" style="color: #1296db;">返回登录</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		useRouter,
		toast,
		clearStorageSync
	} from '@/utils/index.js'

	import {
		register
	} from '@/api/userInfo.js'

	const imagUrl = ref("")
	const uuid = ref('')
	const pwd_show = ref(false)
	const pwd_cshow = ref(false)
	const form = ref({
		userName: '',
		nickName: '',
		password: '',
		confirmPassword: '',
	})
	const change_pwd = (type) => {
		if (type == 1) {
			pwd_show.value = !pwd_show.value
		} else {
			pwd_cshow.value = !pwd_cshow.value
		}
	}

	const goTo = () => {
		useRouter("/pages/login/login")
	}
	const checkPhoneHander = async () => {
		const result = await checkPhone(form.value.phone)
		return result.isRegister
	}
	const checkEamilHandler = async () => {
		const result = await checkEamil({
			email: form.value.eamil
		})
		return result.isRegister
	}
	const registerHandler = async () => {
		var passwordPattern = /^[A-Za-z0-9]{6,20}$/
		var userNamePattern=/[a-zA-Z][a-zA-Z0-9_]{3,19}/
		var nickNamePatter=/[a-zA-Z0-9_\u4e00-\u9fa5]{2,16}/

		if(!form.value.userName){
			toast("用户名不能为空")
		}
		else if(!userNamePattern.test(form.value.userName)){
			toast("用户名可输入字母、数字、下划线，长度 4-20 位，且不能以数字或下划线开头")
		}
		if (!passwordPattern.test(form.value.password)) {
			toast("昵称可输入中文，字母、数字、下划线，长度2-16位")
			return
		} else if (form.value.password !== form.value.confirmPassword) {
			toast("输入密码和确认密码不一样")

		} else {
			const result = await register(form.value);
			if (result.code=200) {
				toast("注册成功，将跳转登录页面")
				clearStorageSync()
				useRouter('/pages/login/login', 'reLaunch')
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F4F5F6;
	}

	.img_code {
		width: 60px;
		height: 30px;
	}

	.login {
		.content-wrapper {
			width: 100%;

			.title {
				margin-top: 35rpx;
				width: 100%;
				margin-bottom: 10px;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 30px;
					height: 30px;
					margin-right: 5px;
				}

				h1 {
					border: 0px;
					text-align: center;
					height: 50px;
					line-height: 50px;
					font-size: 17px;
					overflow: hidden;
					font-weight: 400;
				}
			}

			.login-form {
				margin: 20px 10px 20px 15px;
				background: #FFFFFF;

				.login-form-items {
					padding: 15px 10px;
					border-bottom: 1px solid #F3F4F5;
					position: relative;
					display: -webkit-flex;
					display: flex;
					align-items: center;

					.login-form-items-title {
						width: 25%;
						line-height: 22px;
						height: 22px;
						flex-shrink: 0;
					}

					.login-input {
						width: 100%
					}

				}
			}
		}

		.submit-wrapper {
			padding: 10px;
			padding-top: 10px;
			background-color: 11ffff;
		}
	}

	.footer {
		padding: 10px;
		display: flex;
	}
</style>